<template>
	<div class="index" style="height: 100vh; overflow: auto; background: rgb(246, 248, 251);">
    <div style="width: 7.5rem; margin: 0px auto; ">
      <div><img :src="all2.image1" style="width: 7.5rem;"></div>
      <div style="padding: 0.3rem; background: #fff; border-radius: 0.3rem; margin: 0.3rem;">
        <div style="font-size: 0.3rem; margin-bottom: 0.2rem;" v-if="!all2.sale_name">{{all2.title}}</div>
        <div style="font-size: 0.3rem; margin-bottom: 0.2rem;" v-if="all2.sale_name">{{all2.sale_name}}</div>
        <div style="font-size: 0.34rem; font-weight: bold; margin-bottom: 0.2rem;">
        <!-- {{all2.yuezu || '--'}} -->
        <span v-if="all2.yuezu">{{all2.yuezu}}</span>
        <span v-if="!all2.yuezu">
          <span v-if="all2.yuezu === 0">0</span>
          <span v-if="!all2.yuezu === 0">--</span>
        </span>

        <span style="font-size: 0.24rem">元/月</span>
        </div>
        <div style="background: linear-gradient(180.00deg, rgb(246, 248, 251),rgb(235, 242, 255) 100%); border-radius: 0.2rem; justify-content: space-around; padding: 0.25rem 0; text-align: center;" class="flex">
          <div>
            <!-- <div style="font-size: 0.27rem; margin-bottom: 0.1rem; font-weight: bold;">{{all2.liuliang || '--'}}<span style="font-size: 0.24rem; margin-left: 0.05rem;" v-if="all2.liuliang">G</span></div>
            -->
            <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">
              <span v-if="all2.liuliang">{{all2.liuliang}}</span>
              <span v-if="!all2.liuliang">
                <span v-if="all2.liuliang === 0">0</span>
                <span v-if="!all2.liuliang === 0">--</span>
              </span>
              <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="all2.liuliang || all2.liuliang === 0">G</span>
            </div>

            <div style="font-size: 0.21rem; color: rgb(120, 125, 133);">通用流量</div>
          </div>
          <div>
            <!-- <div style="font-size: 0.27rem; margin-bottom: 0.1rem; font-weight: bold;">{{all2.dx_liuliang || '--'}}<span style="font-size: 0.24rem; margin-left: 0.05rem;" v-if="all2.dx_liuliang">G</span></div> -->

            <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">
              <span v-if="all2.dx_liuliang">{{all2.dx_liuliang}}</span>
              <span v-if="!all2.dx_liuliang">
                <span v-if="all2.dx_liuliang === 0">0</span>
                <span v-if="!all2.dx_liuliang === 0">--</span>
              </span>
              <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="all2.dx_liuliang || all2.dx_liuliang === 0">G</span>
            </div>
            <div style="font-size: 0.21rem; color: rgb(120, 125, 133);">定向流量</div>
          </div>
          <div>
            <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">
              <span v-if="all2.yuyin">{{all2.yuyin}}</span>
              <span v-if="!all2.yuyin">
                <span v-if="all2.yuyin === 0">0</span>
                <span v-if="!all2.yuyin === 0">--</span>
              </span>
              <!-- <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.liuliang || item.liuliang === 0">G</span> -->
              <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="all2.yuyin_type == 0 && (all2.yuyin || all2.yuyin === 0)">分钟</span>
              <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="all2.yuyin_type == 1">元/分钟</span>
            </div>
            <!-- <div style="font-size: 0.27rem; margin-bottom: 0.1rem; font-weight: bold;">{{all2.yuyin || '--'}}
              <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="all2.yuyin_type == 0 && all2.yuyin">分钟</span>
              <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="all2.yuyin_type == 1">元/分钟</span>
            </div> -->
            <div style="font-size: 0.21rem; color: rgb(120, 125, 133);">通话时长</div>
          </div>
        </div>
      </div>
      <div style="padding: 0.3rem; background: #fff; border-radius: 0.3rem; margin: 0.3rem;">
        <div class="flex">
          <div style="font-size: 0.24rem; color: rgb(120, 125, 133); margin-right: 0.2rem; margin-bottom: 0.2rem;">优势</div>
          <div class="flex">
            <div style="background: rgb(255, 223, 223); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(254, 61, 61); margin-right: 0.2rem; margin-bottom: 0.2rem;" v-if="all2.selling_point.length>0 && all2.selling_point[0]">{{all2.selling_point[0]}}</div>
            <div style="background: rgb(223, 255, 228); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(8, 143, 26); margin-right: 0.2rem; margin-bottom: 0.2rem;" v-if="all2.selling_point.length>0 && all2.selling_point[1]">{{all2.selling_point[1]}}</div>
            <div style="background: rgb(233, 241, 255); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(0, 90, 255); margin-right: 0.2rem; margin-bottom: 0.2rem;" v-if="all2.selling_point.length>0 && all2.selling_point[2]">{{all2.selling_point[2]}}</div>
            <div style="background: rgb(246, 248, 251); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(120, 125, 133); margin-bottom: 0.2rem;" v-if="all2.selling_point.length>0 && all2.selling_point[3]">{{all2.selling_point[3]}}</div>
          </div>
        </div>
        <div class="flexc">
          <div style="font-size: 0.24rem; color: rgb(120, 125, 133); margin-right: 0.2rem;">注意</div>
          <div class="flex">
            <div style="width: 5.5rem; font-size: 0.2rem;">
                {{all2.points}}
            </div>
          </div>
        </div>

      </div>
      <div id="inhear" class="flexcc" v-if="take_number" style="width: 5rem; margin: 0 auto;">
        <el-divider content-position="center" >选号办理</el-divider>
      </div>
      <xuanhao
        v-if="take_number"
        :gth_page_id = gth_page_id
        :take_number = take_number
        :pick_number_rules = pick_number_rules
        @upnum="upnum"
         />
      <div class="flexcc" style="width: 5rem; margin: 0 auto;">
        <el-divider content-position="center" >商品详情</el-divider>
      </div>
      <div style="width: 6.9rem; font-size: 0.2rem; margin: 0.2rem auto; padding-bottom: 1.5rem;" v-html="all2.description">

      </div>

      <div style="position: fixed; left: 0; bottom: 0; width: 7.5rem; padding: 0.1rem; background: #fff;" class="flexbc">
        <div class="flex" v-if="!$route.query.one" style="width: 2.5rem; font-size: 12px;">
          <div class="flexcc" style="margin-left: 0.3rem; width: 0.8rem;" @click="shouye" >
            <div>
              <div class="flexcc"><img src="../../../static/img/xiadan1.png" style="width: 0.33rem; margin-bottom: 0.05rem;"></div>
              <div style="font-size: 0.2rem; text-align: center;">首页</div>
            </div>
          </div>
          <div class="flexcc" style="margin-left: 0.3rem; width: 0.8rem;" @click="show3 = true" >
            <div>
              <div class="flexcc"><img src="../../../static/img/xiadan2.png" style="width: 0.33rem; margin-bottom: 0.05rem;"></div>
              <div style="font-size: 0.2rem; text-align: center;">联系客服</div>
            </div>
          </div>
        </div>

        <div v-if="$route.query.one" style="width: 2.5rem; font-size: 12px;">&nbsp;</div>
        <a v-if="take_number" href="#inhear" style="background: rgb(0, 90, 255); margin-left: 0.3rem; border-radius: 0.4rem; font-size: 0.28rem; width: 4.5rem; height: 0.8rem; color: #fff;" class="flexcc" @click="tipsxh" >立即办理<span style="margin-left:5px" v-if="all2.card_cost!='0.00'">￥{{ all2.card_cost }}</span></a>
        <div v-else>
          <div  @click="showshow" style="background: rgb(0, 90, 255); margin-left: 0.3rem; border-radius: 0.4rem; font-size: 0.28rem; width: 4.5rem; height: 0.8rem; color: #fff;" class="flexcc" v-if="all2.order_button">{{all2.order_button}}<span style="margin-left:5px" v-if="all2.card_cost!='0.00'">￥{{ all2.card_cost }}</span></div>
          <div  @click="showshow" style="background: rgb(0, 90, 255); margin-left: 0.3rem; border-radius: 0.4rem; font-size: 0.28rem; width: 4.5rem; height: 0.8rem; color: #fff;" class="flexcc" v-if="!all2.order_button">立即办理<span style="margin-left:5px" v-if="all2.card_cost!='0.00'">￥{{ all2.card_cost }}</span></div>
        </div>
      </div>

    </div>
    <van-action-sheet v-model="show" title="填写下单信息">
      <div style="padding: 0.3rem;">
        <div v-if="take_number" class="flexc" style="margin-bottom: 0.2rem;">
          <div><img src="../../../static/img/xiadan3.png" style="width: 0.36rem; margin-right: 0.1rem;"></div>
          <div style="font-size: 0.34rem;">选择号码：{{ all.pretty_number }}</div>
        </div>

        <div class="flexc" style="margin-bottom: 0.2rem;" v-if="(all2.need_idcard && shishangpinye) || !shishangpinye">
          <div><img src="../../../static/img/xiadan3.png" style="width: 0.36rem; margin-right: 0.1rem;"></div>
          <div style="font-size: 0.34rem;">入网信息</div>
        </div>
        <div style="color: rgb(250, 100, 1); font-size: 0.24rem; margin-bottom: 0.2rem;"  v-if="(all2.need_idcard && shishangpinye) || !shishangpinye">根据国家实名制要求，请准确提供身份证信息</div>
        <div class="flexc" style="border-bottom: 1px solid rgb(227, 232, 241);" v-if="(all2.need_idcard && shishangpinye) || !shishangpinye">
          <div style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;">姓名</div>
          <div style="width: 5.3rem;"><van-field v-model="all.id_card_name" placeholder="系统已加密,请放心填写" /></div>
        </div>
        <div class="flexc" style="border-bottom: 1px solid rgb(227, 232, 241);" v-if="(all2.need_idcard && shishangpinye) || !shishangpinye">
          <div style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;">身份证号</div>
          <div style="width: 5.3rem;"><van-field v-model="all.id_card_num" placeholder="系统已加密,请放心填写" /></div>
        </div>
        <div v-if="(all2.show_type == 0 && all.id_card_name && all.id_card_num.length == 18) || all2.show_type == 1 || !shishangpinye">
          <div class="flexc" style="margin-bottom: 0.2rem; margin-top: 0.4rem;">
            <div><img src="../../../static/img/xiadan4.png" style="width: 0.36rem; margin-right: 0.1rem;"></div>
            <div style="font-size: 0.34rem;">收货信息</div>
          </div>
          <div class="flexc" style="border-bottom: 1px solid rgb(227, 232, 241);" v-if="!all2.same_name">
            <div style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;">收货人</div>
            <div style="width: 5.3rem;"><van-field v-model="all.address_name" placeholder="请输入收货人" /></div>
          </div>
          <div class="flexc" style="border-bottom: 1px solid rgb(227, 232, 241);">
            <div style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;">联系方式</div>
            <div style="width: 5.3rem;"><van-field v-model="all.mobile" type="tel" placeholder="请输入联系方式" /></div>
          </div>
          <div class="flexc" style="border-bottom: 1px solid rgb(227, 232, 241); position: relative;">
            <div style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;">所在地区</div>
            <div style="width: 5.3rem;" @click="show2 = true">
              <div class="where" style="line-height: 44px; font-size: 14px; padding-left: 16px;">{{shengshiqu}}
              	<van-icon name="arrow" size="14" style="position: absolute; top: 0px; line-height:44px; right:0;" />
              </div>
            </div>
          </div>
          <div class="flexc" style="border-bottom: 1px solid rgb(227, 232, 241);">
            <div style="width: 1.5rem; color: rgb(120, 125, 133); font-size: 0.28rem;">详细地址</div>
            <div style="width: 5.3rem;"><van-field v-model="all.address" placeholder="小区，写字楼，门牌号等" /></div>
          </div>
        </div>

        <div v-if="all2.is_need_photo" style="font-size: 12px;">
        	<div style="font-size: 0.3rem; padding:0.3rem 0 0">身份证照片上传：</div>
        	<div style="border-bottom:1px #EAEAEA solid; padding:0.3rem 0" >
        		根据运营商要求，该套餐需上传身份证照片才可开卡，该照片仅用于运营商开卡，请按照要求上传正确的照片。
        	</div>
        	<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
        		<div style="width: 3rem; background: #f7f8fa;" class="flexcc">

        			<div style="width: 100%; height: 100%;" class="flexcc">
        				<van-uploader :after-read="afterRead1"  deletable="false" preview-size="3rem" show-upload="false" >
        					<div v-if="all.face_url"><img :src="all.face_url" style="width: 3rem; "></div>
        					<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.face_url"><van-icon name="photograph" color="#999" size="30" /></div>
        				</van-uploader>
        			</div>
        		</div>
        		<div style="width: 3rem;" class="flexcc">
        			<img src="../../../static/img/face.jpg" style="width: 3rem;">
        		</div>
        	</div>
        	<div style="padding: 0.1rem 0;">证件四角边缘空隙2厘米以上，手机横拍，照片清晰不模糊，无水印，无反光，无PS</div>
        	<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
        		<div style="width: 3rem; background: #f7f8fa;" class="flexcc">

        			<div style="width: 100%; height: 100%;" class="flexcc">
        				<van-uploader :after-read="afterRead2"  deletable="false" preview-size="3rem" show-upload="false" >
        					<div v-if="all.back_url"><img :src="all.back_url" style="width: 3rem;"></div>
        					<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.back_url"><van-icon name="photograph" color="#999" size="30" /></div>
        				</van-uploader>
        			</div>
        		</div>
        		<div style="width: 3rem;" class="flexcc">
        			<img src="../../../static/img/back.jpg" style="width: 3rem;">
        		</div>
        	</div>
        	<div style="padding: 0.1rem 0;">证件四角边缘空隙2厘米以上，手机横拍，照片清晰不模糊，无水印，无反光，无PS</div>
        	<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
        		<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
        			<div style="width: 100%; height: 100%;"  class="flexcc">
        				<van-uploader :after-read="afterRead3"  deletable="false" preview-size="3rem" show-upload="false" >
        					<div v-if="all.hand_url"><img :src="all.hand_url" style="width: 3rem;"></div>
        					<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.hand_url"><van-icon name="photograph" color="#999" size="30" /></div>
        				</van-uploader>
        			</div>
        		</div>
        		<div style="width: 3rem;" class="flexcc">
        			<img src="../../../static/img/head.png" style="width: 3rem;">
        		</div>
        	</div>
        	<div style="padding: 0.1rem 0;">无需手持身份证，胸部以上，露出双肩，人像面部比例不低于1/3，无水印，无反光，无PS</div>
        	<div style="padding: 0.1rem 0;">请上传真实环境拍摄的免冠照，不要上传证件照</div>
        </div>
        <div style="margin-top: 0.2rem; font-size: 12px;" class="flexc" v-if="all2.pact_have">
          <van-checkbox @change="changeagree" v-model="agreechecked" style="margin-right: 0.1rem; font-size: 12px;">我已阅读并同意</van-checkbox>
          <span style="color: #007AFF;font-size: 12px;" v-for="(item,index) in all2.pact_list" :key="index" @click="dakaixieyi(item)">《{{item.title}}》</span>
        </div>
        <div @click="xiadan" style="background: rgb(0, 90, 255); border-radius: 0.4rem; font-size: 0.28rem; width: 6.9rem; height: 0.8rem; color: #fff; margin-top: 0.7rem;" class="flexcc" v-if="all2.order_button">{{all2.order_button}}<span style="margin-left:5px" v-if="all2.card_cost!='0.00'">￥{{ all2.card_cost }}</span></div>
        <div @click="xiadan" style="background: rgb(0, 90, 255); border-radius: 0.4rem; font-size: 0.28rem; width: 6.9rem; height: 0.8rem; color: #fff; margin-top: 0.7rem;" class="flexcc" v-if="!all2.order_button">立即办理<span style="margin-left:5px" v-if="all2.card_cost!='0.00'">￥{{ all2.card_cost }}</span></div>

      </div>
    </van-action-sheet>

    <van-popup v-model="show2" position="bottom">
    	<van-area :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']" :value="nowcitycode" @confirm="queren" @cancel="quxiao" />
    </van-popup>
    <van-popup v-model="jiazaizhong" :close-on-click-overlay="false"><van-loading type="spinner" color="#fff" /></van-popup>

    <van-popup v-model="show3" position="center" style="border-radius: 0.5rem;">
      <div style="padding: 0.6rem 0.3rem; text-align: center;">
        <div style="font-size: 0.36rem; font-weight: bold; margin-bottom: 0.4rem;">联系客服</div>
        <div style="margin-bottom: 0.2rem;" class="flexcc"><img :src="alls.img" style="width: 3.2rem; "></div>
        <div style="margin-bottom: 0.2rem; font-size: 0.2rem; color: rgb(120, 119, 119);">长按识别二维码加我为好友</div>
        <div style="margin-bottom: 0.2rem; font-size: 0.18rem; color: rgb(178, 177, 177);">非微信环境请截图保存在微信内扫一扫选择相册</div>
        <div @click="lianxi" style="background: rgb(0, 90, 255); border-radius: 0.4rem; font-size: 0.28rem; width: 4.5rem; height: 0.8rem; color: #fff; margin-top: 0.3rem; margin-bottom: 0.2rem;" class="flexcc">联系客服</div>
        <div style="margin-bottom: 0.1rem; font-size: 0.18rem; color: rgb(120, 119, 119);">直接打开微信聊天窗口与我沟通</div>
      </div>
    </van-popup>

    <van-popup v-model="logqueding" style="width: 90%; height: 60vh; font-size: 14px; padding: 0.3rem; height: auto !important; border-radius: 0.1rem;">
    	
      <div v-if="this.all2.protocol_qz" style=" max-height: 60vh;overflow: auto; ">
        <div style="font-size: 14px; text-align: center;">{{log1html.title}}</div>
    	  <div style="font-size: 12px;" class="fz" v-html="log1html.content"></div>
      </div>
    	<div v-else style="margin-bottom: 0.3rem;">
        <div style="margin-bottom: 0.3rem;">请先阅读，并点击同意以下协议</div>
    		<span style="color: #007AFF;font-size: 12px;" v-for="(item,index) in all2.pact_list" :key="index" @click="dakaixieyi(item)">《{{item.title}}》</span>
    	</div>
    	<div class="flexcc">
    		<div><van-button type="default" size="small" @click="disagree">不同意</van-button></div>
    		<div  style="margin-left: 0.3rem;"><van-button type="info" size="small" @click="yongyi" >同意</van-button></div>
    	</div>
    </van-popup>

    <van-popup v-model="log1"  class="van-popup2" style="width: 90%; height: 60vh; color: #fff; padding: 0.3rem;">
      <div style="font-size: 14px; text-align: center;">{{log1html.title}}</div>
    	<div style="font-size: 12px;" class="fz" v-html="log1html.content"></div>
    </van-popup>

    <van-popup v-model="fangzha"  class="van-popup2" style="width: 90%; background: rgb(0, 72, 255); border-radius: 0.2rem; color: #fff; padding: 0.3rem; font-size: 14px;">
      <div class="flexcc" style="margin-bottom: 0.2rem;">
        <div style="font-size: 14px; margin-right: 0.1rem;">防诈提醒</div>
        <div><img src="../../../static/img/fangzha.png" style="width: 0.3rem;"></div>
      </div>
      <div style="font-weight: bold;margin-bottom: 0.2rem;">公安部郑重提示：</div>
      <div style="margin-bottom: 0.4rem;">请勿将您本人身份证信息实名的号卡用于诈骗、黑产等不合法行为，请勿将号卡进行转卖、租借他人使用，如丢失号卡请及时前往营业厅挂失、注销。<span style="color: rgb(255, 211, 0);">如号码涉嫌诈骗，实名登记机主需承担法律责任。</span></div>
      <div style="background: #fff; padding: 0.1rem 0.3rem; color: #000; text-align: center; border-radius: 1rem;" @click="showshow">我已知晓，并承诺本人使用</div>
    </van-popup>
    <van-popup position="bottom" v-model="isshowzf">
      <div style="text-align:center;font-size:18px;padding:20px 0">选择支付方式</div>
      <div v-if="this.all2.wx_switch" style="text-align:center;font-size:16px;padding:20px ;border-bottom:1px solid #E5E5E5;display:flex;align-items:center" @click="paytype('vx')">
        <img src='../../../static/img/wxzf.png' style="width:30px;margin-right:15px">
        微信支付
      </div>
      <div v-if="this.all2.ali_switch" style="text-align:center;font-size:16px;padding:20px ;display:flex;align-items:center" @click="paytype('zfb')">
        <img src='../../../static/img/zfbzf.png' style="width:30px;margin-right:15px">
        支付宝支付
      </div>
      <!-- <div style="text-align:center;font-size:16px;padding:20px 0;" v-if="!this.all2.ali_switch&&!this.all2.wx_switch">未开通支付方式</div> -->
    </van-popup>
    <div v-html="payGateWay" ref="alipayWap"></div>
	</div>
</template>
<script>
  import * as qiniu from 'qiniu-js'
  import QRCode from 'qrcodejs2'
  import chuantu from '@/components/chuantu.vue'
  import xuanhao from '@/components/xuanhao.vue'
	export default {
    components:{
      chuantu,
      xuanhao
    },
		name: 'index',
		data() {
			return {
        fangzha:false,
        fangzha2:false,
        logqueding:false,
        log1:false,
        log1html:"",
        shengshiqu: "省、市、区",
        jiazaizhong:false,
        areaList:{

        },
        show:false,
        show2:false,
        show3:false,
        all2:{
          selling_point:[]
        },
        all:{
            address:"",
            address_city:"",
            address_district:"",
            address_mobile:"",
            address_name:"",
            address_province:"",
            goods_sku:"",
            id_card_name:"",
            id_card_num:"",
            mobile:"",
            share_id:"",
            source:"weixiaodian",
            pretty_number:''
        },
        list:[],
        alls:"",
        take_number:'',
        gth_page_id:'',

        shishangpinye:false,
        checked:false,
        pick_number_rules:'',
        pickobg:{},
        nowcitycode:'',
        isshowzf:false,
        iswx:null,
        orderurl:'',
        payGateWay:'',
        iscanxiadan:true,
        agreechecked:false
			}
		},
		async created() {
      // js判断是否是微信环境
      //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
      var ua = window.navigator.userAgent.toLowerCase();
      //通过正则表达式匹配ua中是否含有MicroMessenger字符串
      if(ua.match(/MicroMessenger/i) == 'micromessenger'){
          // 是微信环境
          console.log('是微信环境')
          this.iswx = true

          //通过自己后台写的接口拿到配置的appid
          //拼接地址后跳转微信，成功将返回拼接的链接，并携带code参数，code只能用一次
          axios.get('/api/wechat/get').then((response)=>{
            if (response.data.msg.code == 0) {
              if(response.data.data){
                this.appid  =  response.data.data
                let url = location.href 
    
                console.log('获取=-=====appid')
                console.log(this.appid)
                console.log(url)

                //通过拿到的code,走自己后台的接口，即可获得微信信息，有的需要授权，有的不需要
                //例如获取openid
                if(this.$route.query.code){
                  if(!localStorage.getItem('vxopenid')){
                    axios.get('/api/wechat/code2token?code='+this.$route.query.code).then((response)=>{
                      if (response.data.msg.code == 0) {
                        localStorage.setItem('vxopenid',response.data.data.openid)
                      }
                    })
                  }
                  
                }else{
                  window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+this.appid+'&redirect_uri='+encodeURIComponent(url)+'&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
                }
              }else{
                // vant.Toast('未配置微信信息');
              }
            }
          })
          
      }else{
          //不是微信环境
          this.iswx = false
          console.log(location.href )
        
      }



      // 获取省市区
      await this.getssq()

      if(this.$route.query.shop_id){
        this.all.share_id = window.atob(this.$route.query.shop_id)
      }else{
        this.all.share_id = 0
      }
      // https://static.91haoka.cn/areanew.json
      // https://static.91haoka.cn/tongyidiqu.json
			await axios.get("https://file.storep.91haoka.cn/tongyidiqu.json")
				.then(response=> {
					this.areaList = response.data

      //     let data = JSON.parse(JSON.stringify(this.areaList.province_list))
      //     let data2 = JSON.parse(JSON.stringify(this.areaList.city_list))
      //     let data3 = JSON.parse(JSON.stringify(this.areaList.county_list))

      //     Object.keys(data).map((key3, item3) => {
      //       console.log(key3,item3,data[key3])
      //       if(data[key3].includes('北京')){
      //         delete this.areaList.province_list[key3]
      //       }
      //     })

      //     Object.keys(data2).map((key3, item3) => {
      //       console.log(key3,item3,data2[key3])
      //       if(data2[key3].includes('石家庄')){
      //         delete this.areaList.city_list[key3]
      //       }
      //     })

				})

      this.getinfo()
      this.getinfo2()



		},
		mounted() {

		},
		methods: {
      yongyi:function(){
        this.logqueding = false
        // this.all2.pact_check = true
        this.agreechecked = true
      },
      showshow:function(){
        console.log(localStorage.getItem('fangzha2'))
        if(localStorage.getItem('fangzha2')){
          this.show = true
          this.fangzha = false
        }else{
          this.fangzha = true

          localStorage.setItem('fangzha2',true)
        }
      },
      dakaixieyi:function(item){
      	this.log1html = item
      	this.log1 = true
      },
      lianxi:function(){

        window.location.href = this.alls.cust_url
      },
      shouye:function(){
        if(this.$route.query.shop_id){
          location.href = location.origin + '/h5/index?shop_id=' + this.$route.query.shop_id
        }

        if(this.$route.query.shops_id){
          location.href = location.origin + '/h5/index?shops_id=' + this.$route.query.shops_id
        }

        if(!this.$route.query.shop_id && !this.$route.query.shops_id){
          location.href = location.origin + '/h5/index'
        }

      },
      xiadan:function(){
        
        

        


        //如果是信息流页面的商品 就走配置条件
        if(this.shishangpinye){
          if(this.all2.need_idcard && !this.all.id_card_num){
            vant.Toast('请填写身份证号');
            return
          }
          if(this.all.id_card_num){
            const chineseIdCardRegex = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/;
            if (chineseIdCardRegex.test(this.all.id_card_num)) {

            } else {
              vant.Toast('身份证号码格式不正确');
              return
            }
          }
          console.log(this.all2.age_limit && this.all2.min_age && this.all2.max_age)
          if(this.all2.age_limit && this.all2.min_age && this.all2.max_age){
              let arr = this.all.id_card_num
              let nian = arr.substr(6,4)
              let yue = arr.substr(10,2)
              let ri = arr.substr(12,2)
              let quan = nian+'-'+yue+'-'+ri

              let x = moment().subtract(this.all2.min_age,'years').format('YYYY-MM-DD')
              let z = moment(quan).format('YYYY-MM-DD')
              let y = moment().subtract(this.all2.max_age,'years').format('YYYY-MM-DD')

              let x1 = moment().subtract(this.all2.min_age,'years').format('X')
              let z1 = moment(quan).format('X')
              let y1 = moment().subtract(this.all2.max_age,'years').format('X')

              if(z<x & z>y){

              }else{
                  vant.Toast("您的年龄不符合要求，无法办理,办理年龄"+this.all2.min_age+'岁-'+this.all2.max_age+'岁');
                  return;
              }
          }
          if(this.all2.same_name){
            this.all.address_name = this.all.id_card_name
          }

          // if(this.all2.is_need_photo && !this.all.face_url && !this.all.back_url && !this.all.hand_url){
          //   vant.Toast('请上传证件');
          //   return
          // }
        }else{


          if(this.all2.pact_have&&this.all2.pact_check!=3){
            if(!this.agreechecked){
              vant.Toast('请阅读并同意入网协议');
              this.agreechecked = true
              this.logqueding = true
              if(this.all2.protocol_qz){
                this.log1html = this.all2.pact_list[0]
              }
              return
            }
          }

         


          if(!this.all.id_card_name){
            vant.Toast('请填写姓名');
            return
          }
          if(!this.all.id_card_num){
            vant.Toast('请填写身份证号');
            return
          }
          if(this.all.id_card_num){
            const chineseIdCardRegex = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/;
            if (chineseIdCardRegex.test(this.all.id_card_num)) {

            } else {
              vant.Toast('身份证号码格式不正确');
              return
            }
          }

        }
        // if(!this.all.address_name){
        //   vant.Toast('请填写收货人');
        //   return
        // }

        if(this.all2.is_need_photo){
          if(!this.all.face_url || !this.all.back_url || !this.all.hand_url){
            vant.Toast('请上传证件');
            return
          }
        }

        if(!this.all.mobile){
          vant.Toast('请填写联系方式');
          return
        }

        var regex = /^1[3456789]\d{9}$/;
        if (regex.test(this.all.mobile)) {

        } else {
            vant.Toast('请填写正确的联系方式');
            return
        }

        if(!this.all.address_province){
          vant.Toast('请填写省市区');
          return
        }
        if(!this.all.address){
          vant.Toast('请填写收货地址');
          return
        }

        
        this.xiadanzhong = true



       
        if(this.$route.query.shops_id || this.$route.query.one){
          this.all.page_id = this.$route.query.shops_id
          this.all.id = this.$route.query.id
          this.orderurl = '/api/fcreate/order'
        }else{
          this.orderurl = '/api/create/order'
        }
        if(this.$route.query.one){
          this.all.source = this.all2.page_source
        }else{
          this.all.source = this.alls.store_name
        }

        this.all.take_num_params = this.pickobg


        //传个code开始
        Object.keys(this.areaList.province_list).map((item, index) => {
        	if(this.areaList.province_list[item] == this.all.address_province){
            this.all.province_code = item
          }
        })
        Object.keys(this.areaList.city_list).map((item, index) => {
        	if(this.areaList.city_list[item] == this.all.address_city){
            this.all.city_code = item
          }
        })
        Object.keys(this.areaList.county_list).map((item, index) => {
        	if(this.areaList.county_list[item] == this.all.address_district){
            this.all.district_code = item
          }
        })
        //传个code结束

        this.all.openid = localStorage.getItem('vxopenid')

        
        if(this.all2.card_cost=='0.00'){
          this.all.pay_way = ''
          //下单
          this.xiadango()
        }else{
          if(this.all.pay_way==undefined){
            
            
            if(this.all2.wx_switch&&this.all2.ali_switch){
              //选择支付方式
              this.isshowzf = true
            }else if(this.all2.wx_switch&&!this.all2.ali_switch){
              //微信
              this.paytype('vx')
            }else if(this.all2.ali_switch&&!this.all2.wx_switch){
              //支付宝
              this.paytype('zfb')
            }else if(!this.all2.wx_switch&&!this.all2.ali_switch){
              vant.Toast('未开通支付方式');
            }
          }
        }

        

        

        
      },
      //省市区确认
      queren: function(v) {
      	if (!v[0].code || !v[1].code || !v[2].code) {
      		vant.Toast('请完整选择省市区');
      		return false
      	}
      	this.all.address_province = v[0].name
      	this.all.address_city = v[1].name
      	this.all.address_district = v[2].name

        this.all.province_code = v[0].code
        this.all.city_code = v[1].code
        this.all.district_code = v[2].code

      	this.shengshiqu = this.all.address_province + '  ' + this.all.address_city + '  ' + this.all.address_district
      	this.show2 = false
      },
      //省市区取消
      quxiao: function() {
      	this.show2 = false
      },
      xiazai:function(){
        let img = document.getElementsByClassName('qrcode')[0].childNodes[1]
        var a = document.createElement('a');
                 a.download = 'erweima';//这边是文件名，可以自定义
                 a.href = img.src;
                 document.body.appendChild(a);
                 a.click();
                 document.body.removeChild(a);
      },
      creatQrCode(url) {
        this.img_log5 = true
        this.$nextTick(()=>{
          this.$refs.qrCodeUrl.innerHTML = '';
          let url = '11111111111'
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: url, // 需要转换为二维码的内容
              width: 310,
              height: 310,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
          })
        })
      },
      getimg:function(item){
        this.all.top_pic = item
      },

      getinfo2:function(){
        if(this.$route.query.one){
          this.shishangpinye = true
          return false
        }
        let url = ""
        if(this.$route.query.shop_id){
          console.log(1)
          //那就是分销商的店铺
          url = '/api/mstore/info?shop_id='+window.atob(this.$route.query.shop_id)
        }else{
          //有shops_id就是页面
          if(this.$route.query.shops_id){
            url = `/api/flow/storeinfo?id=${this.$route.query.shops_id}`

            this.shishangpinye = true
          }else{
            //都没有就是管理员店铺
            url = '/api/mstore/info'
          }
        }

        if(this.$route.query.one){
          return false
        }

        axios.get(url).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.alls = response.data.data
            // if(this.alls.pact_check){
            //   this.checked = true
            // }
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      getinfo:function(){

        let url = ""
        if(this.$route.query.shops_id || this.$route.query.one){
          url = '/api/flow/pageinfo?id='+this.$route.query.id
        }else{
          if(this.$route.query.shop_id){
            url = '/api/page/info?id='+this.$route.query.id+'&shop_id='+window.atob(this.$route.query.shop_id)
          }else{
            url = '/api/page/info?id='+this.$route.query.id
          }
        }

        axios.get(url).then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data.selling_point){
              response.data.data.selling_point = JSON.parse(response.data.data.selling_point)
            }else{
              response.data.data.selling_point = []
            }
            this.all2 = response.data.data

            this.all2.yuyin = parseFloat(this.all2.yuyin)


            if(this.all2.pact_check==1){
								this.agreechecked = true
						}

            //获取协议

            // axios.get(`${this.apis}/api/network-process-protocol/info?id=${this.item.protocol_id}`)
            // .then(response => {
            // 	this.xieyilist = response.data.data
            // })

            document.title = this.all2.title || this.all2.sale_name
            this.all.goods_sku = this.all2.fetch_code
            this.gth_page_id = this.all2.gth_page_id
            this.take_number = this.all2.take_number
            this.pick_number_rules = this.all2.pick_number_rules

            //发货地区问题
            if(this.all2.deliver_type == 3){
            	let data = this.areaList.province_list
            	let data2 = this.areaList.city_list
            	let data3 = this.areaList.county_list

            	if(this.all2.deliver_area != ''){
                this.all2.deliver_area = JSON.parse(this.all2.deliver_area)
            		let obj = {}
            		let obj2 = {}
            		let obj3 = {}
            		this.all2.deliver_area.forEach(items => {

            			if(items[0]){
            				Object.keys(data).map((key1, item1) => {
            					if (items[0] == key1) {
            						obj[key1] = data[key1]
            					}
            				})
            			}
            			if(items[1]){
            				Object.keys(data2).map((key2, item2) => {
            					if (items[1] == key2) {
            						obj2[key2] = data2[key2]
            					}
            				})
            			}
            			if(items[2]){
            				Object.keys(data3).map((key3, item3) => {
            					if (items[2] == key3) {
            						obj3[key3] = data3[key3]
            					}
            				})
            			}

            		})

            		this.areaList.province_list = obj
            		this.areaList.city_list = obj2
            		this.areaList.county_list = obj3
            	}

            }
            if (this.all2.deliver_type == 1) {
            	let data = JSON.parse(JSON.stringify(this.areaList.province_list))
            	let data2 = JSON.parse(JSON.stringify(this.areaList.city_list))
            	let data3 = JSON.parse(JSON.stringify(this.areaList.county_list))
              if(this.all2.nodeliver_area != ''){
                this.all2.nodeliver_area = JSON.parse(this.all2.nodeliver_area)
                this.all2.nodeliver_area.forEach(items => {
                	Object.keys(data3).map((key3, item3) => {
                		if (items[2] == key3) {
                			delete this.areaList.county_list[key3]
                		}
                	})
                })
              }

            }

            console.log('收货地区')
            console.log(this.areaList)

            //当前省市
            var sheng = sessionStorage.getItem('sheng')
            var shi = sessionStorage.getItem('shi')
            var qu = sessionStorage.getItem('qu')

            for(let i in this.areaList.county_list){
                if(this.areaList.county_list[i]==qu){

                    this.nowcitycode = i
                    this.all.address_province = sheng
      	            this.all.address_city = shi
                    this.all.address_district = qu
                    this.shengshiqu = this.all.address_province + '  ' + this.all.address_city + '  ' + this.all.address_district
                }
            }


        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      //子组件传来的号码
      upnum(val){
        console.log('子组件传来的号码')
        console.log(val)
        this.all.pretty_number = val.mobile
        this.pickobg = val
        this.showshow()
      },

      dataURLtoFile(dataurl, filename) {
        let arr = dataurl.split(","),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {
          type: mime
        });
      },


      getRandomChar:function(len = 11)  {
        var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
        var  tmp = ""
        var timestamp = new Date().getTime();
        for(var  i=0;i<len;i++)  {
          tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
        }
        return  timestamp+tmp;
      },
      //单个图片上传
      uploadok: function(file,who) {
        let name = this.getRandomChar() + '.' + file.name.split('.')[1]
        var that = this
        axios.post(`/api/qiniu/uploadtoken`,{name:name})
          .then(response => {
            if(response.data.msg.code == 0){
              const observer = {
                next(res){
                  console.log(res)
                },
                error(err){
                  console.log(err)
                },
                complete(res){

                  that.$set(that.all,who,'https://gperson.gantanhaokeji.top/'+ res.key)
                }
              }
              const observable = qiniu.upload(file,name, response.data.data.token, {}, {})
              const subscription = observable.subscribe(observer) // 上传开始
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },

      // uploadok: function(file,who) {
      //   var that = this;
      //   var reader = new FileReader()
      //   var img = new Image();
      //   reader.onload = function(e) {
      //     img.src = e.target.result;
      //   };
      //   var canvas = document.createElement('canvas');
      //   var context = canvas.getContext('2d');
      //   // base64地址图片加载完毕后
      //   let p = new Promise((r, j) => {
      //     img.onload = function() {
      //       // 图片原始尺寸
      //       var originWidth = this.width;
      //       var originHeight = this.height;
      //       // 最大尺寸限制
      //       var maxWidth = 1920,
      //         maxHeight = 1080;
      //       // 目标尺寸
      //       var targetWidth = originWidth,
      //         targetHeight = originHeight;
      //       // 图片尺寸超过400x400的限制
      //       if (originWidth > maxWidth || originHeight > maxHeight) {		              if (originWidth / originHeight > maxWidth / maxHeight) {
      //            // 更宽，按照宽度限定尺寸                  targetWidth = maxWidth;                  targetHeight = Math.round(maxWidth * (originHeight / originWidth));
      //           } else {                  targetHeight = maxHeight;
      //            targetWidth = Math.round(maxHeight * (originWidth / originHeight));		              }
      //       }
      //       // canvas对图片进行缩放
      //       canvas.width = targetWidth;
      //       canvas.height = targetHeight;
      //       // 清除画布
      //       context.clearRect(0, 0, targetWidth, targetHeight);
      //       // 图片压缩
      //       context.drawImage(img, 0, 0, targetWidth, targetHeight);

      //       let base64 = canvas.toDataURL("image/jpeg", 0.8); // 压缩后的base64图片
      //       let file2 = that.dataURLtoFile(base64, Date.parse(Date()) + ".jpg");
      // 	  r(file2)
      //     };
      //   })
      //   reader.readAsDataURL(file);
      //   p.then(files => {
      // 	  axios.post(`/api/qiniu/uploadtoken`)
      // 	  	.then(response => {
      // 	  	var qiniudata = new FormData();
      // 	  		qiniudata.append('file', files);
      // 	  		qiniudata.append('token',response.data.data);

      // 	  		axios.post('https://upload.qiniup.com',qiniudata)
      // 	  			.then(response => {
      // 	  				this.all[who] = 'https://pic.91haoka.cn/' + response.data.key
      // 	  			})
      // 	  })
      //   })
      // },

      afterRead1: function(file) {
      	this.uploadok(file.file,'face_url')
      },
      afterRead2: function(file) {
      	this.uploadok(file.file,'back_url')
      },
      afterRead3: function(file) {
      	this.uploadok(file.file,'hand_url')
      },
      //提示选号
      tipsxh(){
        vant.Toast('请选择号码');
      },
      // 获取省市区
      async getssq (){

        await axios.get(`/api/ip-address/get`)
          .then(response => {
            if(response.data.msg.code == 0){

              sessionStorage.setItem('sheng', response.data.data.addressComponent.province)
              sessionStorage.setItem('shi', response.data.data.addressComponent.city)
              sessionStorage.setItem('qu', response.data.data.addressComponent.district)
            }else{
              sessionStorage.setItem('sheng', '')
              sessionStorage.setItem('shi', '')
              sessionStorage.setItem('qu', '')
              this.$message.error(response.data.msg.info);
            }
          });
      },
   
      //选择支付
      paytype(type){
        
        // pay_way 0微信外 1支付宝 2微信内
        if(type=='zfb'){
          //支付宝支付
          this.all.pay_way = 1
        }else if(type=='vx'){
          if(this.iswx){
            //微信内支付
            this.all.pay_way = 2
          }else{
            //微信外支付
            this.all.pay_way = 0
          }
        }
        this.isshowzf = false
        //下单
        this.xiadango()
      },
      //下单
      xiadango(){
        if(this.iscanxiadan){
          this.iscanxiadan = false
          axios.post(this.orderurl,this.all).then((response)=>{
        	  if (response.data.msg.code == 0) {
              vant.Toast('下单成功');
              
              console.log(response.data)
              if(this.all.pay_way.toString()==''){
                //不支付
                if(this.$route.query.shops_id){
                  this.$router.push({
                    path:'/success',
                    query:{
                      shops_id:this.$route.query.shops_id
                    }
                  })
                }
                else{
                  if(this.$route.query.shop_id){
                    this.$router.push({
                      path:'/success',
                      query:{
                        shop_id:window.atob(this.$route.query.shop_id)
                      }
                    })
                  }else{
                    this.$router.push({
                      path:'/success'
                    })
                  }
                }

              }else if(this.all.pay_way == 1){
                //支付宝支付
                this.payGateWay = response.data.data
                this.$nextTick(()=> {
                  this.$refs.alipayWap.children[0].submit()
                })
                this.all.pay_way=undefined

              }else if(this.all.pay_way == 2){
                //微信内支付
                WeixinJSBridge.invoke(
                  'getBrandWCPayRequest', {
                      "appId":response.data.data.appId,    
                      'timeStamp': response.data.data.timeStamp,
                      'nonceStr': response.data.data.nonceStr,
                      'package': response.data.data.package,
                      'signType': 'MD5',
                      'paySign': response.data.data.paySign,
                  },
                  function(res){
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    setTimeout(()=>{
                        if(this.$route.query.shops_id){
                          this.$router.push({
                            path:'/success',
                            query:{
                              shops_id:this.$route.query.shops_id
                            }
                          })
                        }
                        else{
                          if(this.$route.query.shop_id){
                            this.$router.push({
                              path:'/success',
                              query:{
                                shop_id:window.atob(this.$route.query.shop_id)
                              }
                            })
                          }else{
                            this.$router.push({
                              path:'/success'
                            })
                          }
                        }
                    },500)
                  }else{
                    // that.all.pay_method = ""
                    // 	that.jiazaizhong = false
                    this.all.pay_way=undefined
                  }
                  }); 

              }else if(this.all.pay_way.toString() == '0'){
                
                //微信外支付
                setTimeout(()=>{
                  window.location.href = response.data.data.h5_url
                },500)
                this.all.pay_way=undefined
              }

              this.iscanxiadan = true

            } else {
              vant.Toast(response.data.msg.info);
              this.all.pay_way=undefined
              this.iscanxiadan = true
            }
          })
        }
        
      },
      //修改同意状态
      changeagree(val){
        console.log(val)
        if(val&&this.all2.protocol_qz){
          this.logqueding = true
          this.log1html = this.all2.pact_list[0]
        }
      },
      //不同意
      disagree(){
        this.logqueding = false
        this.agreechecked = false
      }
      

		}
	}
</script>


<style scoped lang="less">

  /deep/ .el-dialog{ background: rgb(246, 248, 251); border-radius: 29px;}
  .xianshi{background: rgb(64, 156, 255) !important; color: #fff !important;}
  /deep/ .el-divider__text{ background: #f6f8fb;}
  /deep/ .van-popup2{ background: rgba(0, 0, 0, 0.3);}
</style>
